import React, { Component,useEffect } from 'react'

export default class App extends Component {
  state={
    isShow:true
  }
  render() {
    return (
      <div>
        <button onClick={()=>{
          this.setState({
            isShow:!this.state.isShow
          })
        }}>点击</button>
        {/* 切换组件显示(销毁) */}
        {/* {this.state.isShow ?<Child/> :""} */}
        {this.state.isShow &&<Child/> }
      </div>
    )
  }
 
}

function Child(){
  // useEffect可以使用多次
  useEffect(()=>{
    window.onresize=()=>{
      console.log("resize");
    }
    var timer=setInterval(()=>{
      console.log("定时器");
    },1000)
    // 使用闭包，return一个回调函数和第二参数的[]空数组（只执行一次）来销毁组件
    return(()=>{
      window.onresize=null
      clearInterval(timer)
    })
  },[])
  return (
    <div>Child</div>
  )
  
}

